<template>
  <el-dialog
    v-model="dialogFormVisible"
    title="维护公海客户信息"
    width="1400px"
    top="3vh"
    @close="close"
  >
    <el-row :gutter="15">
      <el-col :span="8">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <span>员工挑入信息</span>
            </div>
          </template>
          <el-table
            v-loading="listLoading"
            :data="pickList"
            @selection-change="setSelectRows"
          >
            <el-table-column
              align="center"
              label="客户全称"
              prop="CustomerAllName"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="挑入人"
              prop="PickStaffName"
              show-overflow-tooltip
            />
            <el-table-column align="center" label="操作" width="100">
              <template #default="{ row }">
                <el-button type="text" @click="introduce(row)">参考</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <span>参考挑入信息</span>
            </div>
          </template>
          <el-form label-width="120px" :model="form">
            <el-form-item label="客户全称">
              <el-input
                v-model="form.CustomerAllName"
                style="width: 250px"
                disabled
              />
            </el-form-item>
            <el-form-item label="所属区域">
              <div class="flex">
                <el-cascader
                  v-model="form.City"
                  disabled
                  :options="cityOptions"
                  placeholder="选择地区"
                  style="width: 250px"
                />
                <el-button type="text" @click="citationMsg(form.City, 'City')">
                  引用
                </el-button>
              </div>
            </el-form-item>
            <el-form-item label="所属行业">
              <div class="flex">
                <el-cascader
                  v-model="form.Industry"
                  disabled
                  :options="industryOptions"
                  placeholder="选择行业"
                  style="width: 250px"
                />
                <el-button
                  type="text"
                  @click="citationMsg(form.Industry, 'Industry')"
                >
                  引用
                </el-button>
              </div>
            </el-form-item>
            <el-form-item label="地址">
              <div class="flex">
                <el-input
                  v-model="form.Address"
                  style="width: 250px"
                  disabled
                />
                <el-button
                  type="text"
                  @click="citationMsg(form.Address, 'Address')"
                >
                  引用
                </el-button>
              </div>
            </el-form-item>
            <el-form-item label="电话">
              <div class="flex">
                <el-input
                  v-model="form.Telphone"
                  style="width: 250px"
                  disabled
                />
                <el-button
                  type="text"
                  @click="citationMsg(form.Telphone, 'Telphone')"
                >
                  引用
                </el-button>
              </div>
            </el-form-item>
            <el-form-item label="法定代表人">
              <div class="flex">
                <el-input
                  v-model="form.LegalPerson"
                  style="width: 250px"
                  disabled
                />
                <el-button
                  type="text"
                  @click="citationMsg(form.LegalPerson, 'LegalPerson')"
                >
                  引用
                </el-button>
              </div>
            </el-form-item>
            <el-form-item label="负责人电话">
              <div class="flex">
                <el-input
                  v-model="form.LegalMobile"
                  style="width: 250px"
                  disabled
                />
                <el-button
                  type="text"
                  @click="citationMsg(form.LegalMobile, 'LegalMobile')"
                >
                  引用
                </el-button>
              </div>
            </el-form-item>
            <el-form-item label="业务联系人">
              <div class="flex">
                <el-input
                  v-model="form.BusinessPerson"
                  style="width: 250px"
                  disabled
                />
                <el-button
                  type="text"
                  @click="citationMsg(form.BusinessPerson, 'BusinessPerson')"
                >
                  引用
                </el-button>
              </div>
            </el-form-item>
            <el-form-item label="业务联系人电话">
              <div class="flex">
                <el-input
                  v-model="form.BusinessPersonMobile"
                  style="width: 250px"
                  disabled
                />
                <el-button
                  type="text"
                  @click="
                    citationMsg(
                      form.BusinessPersonMobile,
                      'BusinessPersonMobile'
                    )
                  "
                >
                  引用
                </el-button>
              </div>
            </el-form-item>
            <el-form-item label="主营产品">
              <div class="flex">
                <el-input
                  v-model="form.SalesProducts"
                  style="width: 250px"
                  disabled
                />
                <el-button
                  type="text"
                  @click="citationMsg(form.SalesProducts, 'SalesProducts')"
                >
                  引用
                </el-button>
              </div>
            </el-form-item>
            <el-form-item label="主要销售区域">
              <div class="flex">
                <el-input
                  v-model="form.SalesArea"
                  style="width: 250px"
                  disabled
                />
                <el-button
                  type="text"
                  @click="citationMsg(form.SalesArea, 'SalesArea')"
                >
                  引用
                </el-button>
              </div>
            </el-form-item>
            <el-form-item label="主要客户群体">
              <div class="flex">
                <el-input
                  v-model="form.CustomerGroup"
                  style="width: 250px"
                  disabled
                />
                <el-button
                  type="text"
                  @click="citationMsg(form.CustomerGroup, 'CustomerGroup')"
                >
                  引用
                </el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never">
          <template #header>
            <div class="card-header" style="height: 15px">
              <span style="float: left">公海客户信息</span>
              <el-button
                type="primary"
                size="small"
                style="float: right"
                @click="licenseEdit(realForm)"
              >
                证照维护
              </el-button>
            </div>
          </template>
          <el-form
            ref="formRef"
            label-width="120px"
            :model="realForm"
            :rules="rules"
          >
            <el-form-item label="客户全称" prop="CustomerAllName">
              <el-input v-model="realForm.CustomerAllName" />
            </el-form-item>
            <el-form-item label="所属区域" prop="City">
              <el-cascader
                v-model="realForm.City"
                :options="cityOptions"
                placeholder="选择地区"
                style="width: 300px"
              />
            </el-form-item>
            <el-form-item label="所属行业" prop="Industry">
              <el-cascader
                v-model="realForm.Industry"
                :options="industryOptions"
                placeholder="选择行业"
                style="width: 200px"
              />
            </el-form-item>
            <el-form-item label="地址" prop="Address">
              <el-input v-model="realForm.Address" />
            </el-form-item>
            <el-form-item label="电话" prop="Telphone">
              <el-input v-model="realForm.Telphone" />
            </el-form-item>
            <el-form-item label="法人代表" prop="LegalPerson">
              <el-input v-model="realForm.LegalPerson" />
            </el-form-item>
            <el-form-item label="负责人电话" prop="LegalMobile">
              <el-input v-model="realForm.LegalMobile" />
            </el-form-item>
            <el-form-item label="业务联系人" prop="BusinessPerson">
              <el-input v-model="realForm.BusinessPerson" />
            </el-form-item>
            <el-form-item label="业务联系人电话" prop="BusinessPersonMobile">
              <el-input v-model="realForm.BusinessPersonMobile" />
            </el-form-item>
            <el-form-item label="主营产品" prop="SalesProducts">
              <el-input v-model="realForm.SalesProducts" />
            </el-form-item>
            <el-form-item label="主要销售区域" prop="title">
              <el-input v-model="realForm.SalesArea" />
            </el-form-item>
            <el-form-item label="主要客户群体" prop="CustomerGroup">
              <el-input v-model="realForm.CustomerGroup" />
            </el-form-item>
            <el-form-item label="客户打标" prop="CustomerMark">
              <el-checkbox-group v-model="realForm.CustomerMark">
                <el-checkbox
                  v-for="(item, index) in CustomerMarkOption"
                  :key="index"
                  :value="item.LabelID"
                  :label="item.LabelName"
                  size="large"
                />
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @dblclick.prevent @click="save">
        保 存
      </el-button>
    </template>
  </el-dialog>
  <LicenseMsg ref="LicenseMsgRef" @fetch-data="fetchData" />
</template>

<script>
  import { CustomerAllPickList, SaveCustomer } from '@/api/customerDataedit'
  import { CitySelect, IndustrySelect, CustomerMarkSelect } from '@/api/common'
  import LicenseMsg from '@/views/components/LicenseMsg'

  export default defineComponent({
    name: 'CustomerDataeditEdit',
    components: { LicenseMsg },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        cityOptions: [],
        industryOptions: [],
        listLoading: true,
        pickList: [],
        LicenseMsgRef: null,
        NoDisturb: false,
        BlackList: false,
        realForm: {},
        formRef: null,
        form: {
          roles: [],
        },
        rules: {
          // City: [{ required: true, trigger: 'blur', message: '请选择所属' }],
        },
        title: '',
        dialogFormVisible: false,
        CustomerMarkOption: [],
      })

      const showEdit = (row) => {
        if (!row) {
          state.title = '添加'
        } else {
          state.title = '编辑'
          state.realForm = Object.assign({}, row)
          state.form.CustomerAllName = row.CustomerAllName
          state.realForm.City = JSON.parse(row.City)
          state.realForm.Industry = JSON.parse(row.Industry)
          state.realForm.CustomerMark = row.CustomerMark
          // if (state.realForm.CustomerMark) {
          //   state.BlackList = state.realForm.CustomerMark.BlackList
          //   state.NoDisturb = state.realForm.CustomerMark.NoDisturb
          // }
          // console.log(state.realForm, ' state.realForm.CustomerMark')

          getMsg()
          getCustomerList()
        }
        state.dialogFormVisible = true
      }
      const close = () => {
        state['formRef'].resetFields()
        state.realForm = {}
        state.form = {}
        state.dialogFormVisible = false
      }
      const save = () => {
        // state.realForm.CustomerMark = {
        //   BlackList: state.BlackList,
        //   NoDisturb: state.NoDisturb,
        // }
        // console.log(state.realForm.CustomerMark, 'state.realForm')

        state['formRef'].validate(async (valid) => {
          if (valid) {
            const { msg } = await SaveCustomer(state.realForm)
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            emit('fetch-data')
            close()
          }
        })
      }

      const introduce = (row) => {
        state.form = row
        if (typeof row.City == 'string') {
          state.form.City = JSON.parse(row.City)
        }
        if (typeof row.Industry == 'string') {
          state.form.Industry = JSON.parse(row.Industry)
        }
      }
      const getCustomerList = async () => {
        console.log(state.form, ' state.form state.form')
        const dataMsg = {
          CustomerID: state.realForm.CustomerID,
        }
        const {
          data: { list },
        } = await CustomerAllPickList(dataMsg)
        state.pickList = list
        state.listLoading = false
        console.log(state.pickList, ' state.pickList state.pickList')
      }
      const licenseEdit = (row) => {
        state.LicenseMsgRef.showEdit(row)
        console.log(row, '证照维护')
      }
      const citationMsg = (value, name) => {
        state.realForm[name] = value
      }
      const getMsg = async () => {
        const {
          data: { cityOptions },
        } = await CitySelect()
        const {
          data: { industryOptions },
        } = await IndustrySelect()
        const {
          data: { CustomerMarkOption },
        } = await CustomerMarkSelect()
        state.cityOptions = cityOptions
        state.industryOptions = industryOptions
        state.CustomerMarkOption = CustomerMarkOption
      }

      return {
        ...toRefs(state),
        showEdit,
        introduce,
        citationMsg,
        getMsg,
        licenseEdit,
        getCustomerList,
        close,
        save,
      }
    },
  })
</script>
<style scoped>
  .flex {
    display: flex;
    align-items: center;
  }

  .flex :deep(.el-button) {
    padding: 0px 10px !important;
  }
</style>
